<template>
  <div class="mb20">
    <jxf-titletip :title="'详情'" :hasRefresh="false" :hasGoBack="true"
                  @goBack="$emit('update:showProdDetail', false)"></jxf-titletip>
    <div class="mb20">
      <el-card class="mt20">
        <div slot="header">
          <span>商品信息</span>
        </div>
        <jxf-datalist :info="productInfoList">
          <template slot="image" slot-scope="scope">
            <img :src="scope.info.value" alt="" style="width: 50px;height: 50px;">
          </template>
        </jxf-datalist>
      </el-card>
      <el-card class="mt20">
        <div slot="header">
          <span>价格模板</span>
        </div>
        <jxf-table :table="templateInfoList">
          <template slot="operation" slot-scope="scope">
            <el-button type="text" @click="showAllPriceTemplate(scope.row)">查看全部</el-button>
          </template>
        </jxf-table>
      </el-card>
    </div>
    <PriceTemplateModel ref="PriceTemplateModel" :isShowDetail.sync="isShowModel"></PriceTemplateModel>
  </div>
</template>

<script>
  import formatMoney from '@/assets/js/formatMoney'
  import formatDate from '@/assets/js/formatDate'
  import PriceTemplateModel from './PriceTemplateModel'
  export default {
    name: "ShowProductDetail",
    components: { PriceTemplateModel },
    props: {
      showProdDetail: {
        type: Boolean,
        default: false
      },
      shopTypeIdList: {
        type: Array,
        default: () => {
          return []
        }
      }
    },
    data() {
      return {
        productInfoList: [],
        templateInfoList: {},
        formatMoney: formatMoney,
        isShowModel: false
      }
    },
    methods: {
      // 专属价列表初始化
      initTemplateInfoList() {
        this.templateInfoList = {
          border: true,
          loading: true,
          tr: [
            {
              id: '1',
              label: '模板名称',
              prop: 'templateName',
            },
            {
              id: '2',
              label: '价格',
              prop: 'agreementPrice'
            },
            {
              id: '3',
              label: '适用采购商',
              show: 'template',
              prop: 'operation'
            }],
          data: []
        }
      },
      getProductDetail(id) {
        ajax.get(apis.product.getProductById, {id: id})
          .then(res => {
            if (res.success === true) {
              if (res.data !== null) {
                this.productInfoList = this.formatshowData(res.data)
                if (res.data.templatePricePo !== []) {
                  this.templateInfoList.data = this.setTemplateInfoList(res.data.templatePricePo)
                } else {
                  this.templateInfoList.data = []
                }
                this.templateInfoList.loading = false
              }
            }
          })
      },
      // 商品展示数据处理
      formatshowData(item) {
        return [{
          //   label: "商品编号",
          //   value: item.productNo
          // }, {
          label: "商品图片",
          value: item.picUrl,
          type: "image"
        }, {
          label: "商品名称",
          value: item.productName
        }, {
          label: "标准名称",
          value: item.standardName
        }, {
          label: "所属城市",
          value: item.city
        }, {
          label: "供应商名称",
          value: item.enterpriseName
        }, {
          label: "所属分类",
          value: item.firstClassifyName + " > " + item.secClassifyName + " > " + item.thiClassifyName
        }, {
          label: "规格",
          value: item.specifications
        }, {
          label: "产地",
          value: item.productAddress
        }, {
          label: "品牌",
          value: item.brand
        }, {
          label: "生产商",
          value: item.producer
        }, {
          label: "备注信息",
          value: item.remark
        }, {
          label: "标准售价（元）",
          value: item.price
        }, {
          label: "商品描述",
          value: item.description
        }, {
          label: "销售状态",
          value: (item.isShelf === 2 && (item.status === 0 || item.status === 5))? "商户下架": (item.isShelf === 2 && item.status === 4) ?"强制下架": (item.isShelf === 1 && (item.status === 0 || item.status === 5)) ? "在售":""
        }, {
          label: "最后操作日志",
          value: item.operateTime ? formatDate.timeFormat(item.operateTime) + '   ' + item.userName + '(' + item.contact + '）  ' + item.operateContent : ''
        }]
      },

      // 专属价列表赋值
      setTemplateInfoList(info) {
        if(info === null){
          return []
        }else{
          return info.map(item => {
            return {
              id: item.id,
              templateName: item.templateName,
              agreementPrice: item.agreementPrice ? this.formatMoney.twoDecimal(item.agreementPrice) : '0.00'
            }
          })
        }
      },
      showAllPriceTemplate(obj) {
        console.log(obj)
        this.$refs['PriceTemplateModel'].init(obj)
        this.isShowModel = true
      }
    },
    created() {
      this.initTemplateInfoList()
    }
  }
</script>

<style lang="scss" scoped>
  .imgBlock {
    & > div, & > img {
      cursor: pointer;
      width: 120px;
      height: 120px;
    }
    & > div {
      border: 1px solid #f3f3f3;
      text-align: center;
      line-height: 120px;
      i {
        font-size: 40px;
      }
    }
  }

  .productInfo {
    background-color: #f3f3f3;
    padding: 20px;
    .form-content {
      padding: 20px;
      background-color: #fff;
    }
    .el-form-item {
      width: 48%;
    }
  }

  .el-input {
    max-width: 185px;
  }

</style>
